<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <title>商品测试</title>
    <style>
        body{
            margin: 0;
        }
        #goods_table{
            margin: auto;
            width: 50%;
            height: auto;
        }
        th{
            width: 60px;
        }
    </style>
</head>
<body>
<div>


</div>
<div id="goods_table">
    <table>
        <thead>
        <th>名称</th>
        <th>价格</th>
        <th>库存</th>
        <th>厂商</th>
        <th>零售商</th>
        </thead>
        <tbody>
        <tr v-for="(goods,index) in goodsList">
            <td>{{goods.goodsName}}</td>
            <td>{{goods.goodsPrice}}</td>
            <td>{{goods.goodsCount}}</td>
            <td>{{goods.maker}}</td>
            <td>{{goods.merchantName}}</td>
        </tr>
        </tbody>
    </table>
  <input type="button" @click="selectgoods()" value="点击">
</div>

<script>
    var goods_table = new Vue({
        el:'#goods_table',
        data:{
        goodsList:[]
        },
        methods: {
            selectgoods:function () {
                let _this = this;
                $.ajax({
                    url:'http://localhost:8080/portal/goods/all',
                    success:function (r) {
                      _this.goodsList = r.data;
                    }
                });
            },
        },
        mounted:function () {

        }

    });
</script>

</body>

</html>